/*
* A popup panel class
*/ 

///////////////////////////////////////////////////////////////////////////////
function Popup(caption){
	
	//var thisObj = this;
	
	var el = document.createElement("div");
	el.style.visibility = "hidden";
	el.style.position = "absolute";
	el.className = "popup";
	document.body.appendChild(el);

	/*var header = document.createElement("div");
	//header.style.width = "100%";
	header.style.clear = "right";
	header.className = "popup-header";
	header.innerHTML = "<span>" + caption + "</span><span >x</span>";
	el.appendChild(header);
	
	var body = document.createElement("div");
	body.className = "popup-body";
	el.appendChild(body);*/
	
	var table = document.createElement("table");
	table.border = "0";
	table.cellPadding = "0";
	table.cellSpacing = "0";
	
	// we need <thead> and <tbody> here to workaround the f*cking IE bug
	var thead = document.createElement("thead"); 
	var tr = document.createElement("tr");
	var header = document.createElement("td");
	header.className = "popup-header";
	header.innerHTML = caption || ""; // caption is actually meant to be a text, not html ...
	tr.appendChild(header);
	var sysMenu = document.createElement("td");
	sysMenu.className = "popup-sysmenu";
	sysMenu.innerHTML = "x";
	sysMenu.onclick = makeCallback(this, this.hide);
	tr.appendChild(sysMenu);
	thead.appendChild(tr);
	table.appendChild(thead);
	
	var tbody = document.createElement("tbody");
	tr = document.createElement("tr");
	var body = document.createElement("td");
	body.className = "popup-body";
	tr.appendChild(body);
	tbody.appendChild(tr);
	table.appendChild(tbody);
	
	el.appendChild(table);
	
	this.getElement = function(){return el;}
	this.getHeader = function(){return header;}
	this.getBody = function(){return body;}
}

Popup.prototype.add = function(widget){
	this.getBody().appendChild(widget.getElement());
}

Popup.prototype.show = function(){
	this.getElement().style.visibility = "visible";
}

Popup.prototype.hide = function(){
	this.getElement().style.visibility = "hidden";
}

Popup.prototype.destroy = function(){
	//this.getElement().style.visibility = "hidden";
}

Popup.prototype.center = function(){
	var viewport = new Viewport();
	var wndHeight = viewport.getHeight();
	var wndWidth = viewport.getWidth();
	this.getElement().style.top = "" + (wndHeight / 2 - this.getElement().clientHeight / 2) + "px";
	this.getElement().style.left = "" + (wndWidth / 2 - this.getElement().clientWidth / 2) + "px";
	
	/*// Method of Centering with absolute sizes applied here (see http://css-discuss.incutio.com/?page=CenteringBlockElement)
	this.getElement().setAttribute("style", "position:absolute;left:50%;top:50%;margin-left:-" + (this.getElement().clientWidth / 2) + "px;" + 
		"margin-top:-" + (this.getElement().clientHeight / 2) + "px;");*/
}

Popup.prototype.setClassName = function(className){
	this.getElement().className = className;
}

Popup.prototype.addClassName = function(className){
	this.getElement().className += " " + className;
}

///////////////////////////////////////////////////////////////////////////////
/*function Viewport(){
	var viewportwidth;
	var viewportheight;
	
	// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
	if (typeof window.innerWidth != 'undefined')
	{
		viewportwidth = window.innerWidth,
		viewportheight = window.innerHeight
	}
	
	// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
	else if (typeof document.documentElement != 'undefined'
			&& typeof document.documentElement.clientWidth != 'undefined' 
			&& document.documentElement.clientWidth != 0)
	{
		viewportwidth = document.documentElement.clientWidth,
		viewportheight = document.documentElement.clientHeight
	}
	
	// older versions of IE
	else
	{
		viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
		viewportheight = document.getElementsByTagName('body')[0].clientHeight
	}
	
	this.getWidth = function(){return viewportwidth;}
	this.getHeight = function(){return viewportheight;}
}
*/

